import React, { Component } from 'react'
import { Table, Card, Row, Col } from 'antd'
import { connect } from 'react-redux'
import '../../../less/index.less'
import Menu from '../../common/menu/vertical-menu'
import UrlPattern from 'url-pattern'
import * as programActions from '../../../actions/program'
import { FormattedMessage } from 'react-intl'

class LeaderBoardPageBody extends Component {
  componentDidMount () {
    const urlPattern = new UrlPattern('/program/:programId/leader-board')
    const urlParams = urlPattern.match(this.props.location.pathname)
    this.props.getLeaderBoards(urlParams.programId)
  }

  render () {
    const columns = [{
      title: <FormattedMessage id='名次' />,
      dataIndex: 'index',
      render: (text, record, index) => (
        <span>{index + 1} </span>
      )
    }, {
      title: <FormattedMessage id='姓名' />,
      dataIndex: 'name'
    }, {
      title: <FormattedMessage id='答题数' />,
      dataIndex: 'finishHomeworkCount'
    }, {
      title: <FormattedMessage id='答题积分' />,
      dataIndex: 'finishHomeworkPoint'
    }]
    const {leaderBoard, myRank} = this.props.leaderBoard
    return (
      <Row>
        <Col span={5}>
          <Menu />
        </Col>
        <Col span={19}>
          <Card title={<FormattedMessage id='我的积分' />} className='tws-card' noHovering>
            <p><FormattedMessage id='我的名次' />：{myRank.rank}</p>
            <p><FormattedMessage id='答题的数目' />：{myRank.finishHomeworkCount}</p>
            <p><FormattedMessage id='答题的积分' />：{myRank.finishHomeworkPoint}</p>
          </Card>
          <Card className='margin-t-5 ' title='Top 10' noHovering>
            <Table rowKey={record => record.name}
              columns={columns}
              dataSource={leaderBoard}
              bordered
              pagination={false} />
          </Card>
        </Col>
      </Row>
    )
  }
}

const mapStateToProps = state => ({leaderBoard: state.leaderBoard})
const mapDispatchToProps = dispatch => ({
  getLeaderBoards: (programId) => dispatch(programActions.getLeaderBoards(programId))
})

export default connect(mapStateToProps, mapDispatchToProps)(LeaderBoardPageBody)
